<!-- 
  带分页的table
 -->
<template>

  <!-- 顶部搜索条件 -->
  <div style="float: left; padding-top: 15px">
    <el-form :inline="true" :model="obj.formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="obj.formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="obj.formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!--  表格 -->
  <el-table :data="obj.tableData" stripe border fit="true" style="width: 100%">
    <el-table-column prop="id" label="id"> </el-table-column>

    <el-table-column prop="name" label="姓名"> </el-table-column>

    <el-table-column prop="name" label="姓名"> </el-table-column>

    <el-table-column prop="name" label="姓名"> </el-table-column>
  </el-table>
  <list-page ref="postPage" @getPageData="getPageData"></list-page>

  <!-- 点击新增的弹窗 -->
  <el-dialog title="收货地址" v-model="obj.dialogFormVisible">
    <el-form :model="obj.form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="obj.form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="obj.form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormClick">取 消</el-button>
        <el-button type="primary" @click="dialogFormClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref } from "vue";
import listPage from "../../components/list-page.vue";

export default {
  components: { listPage },
  props: {
    btnObj: {
      type: Object,
      required: true,
    },
  },

  watch: {
    btnObj: {
      //监听按钮变化
      // eslint-disable-next-line no-unused-vars
      handler(val, oldVal) {
        //判断按钮数据中 fun的值，根据不同的值执行不同的方法
        if (val.fun == "save") {
          //判断按钮 如果是新增 弹窗 此处执行所需的业务逻辑
          this.obj.dialogFormVisible = true;
        }
      },
      deep: true,
    },
  },

  setup(props) {
    const obj = reactive({
      tableData: [], //定义table数组
      form: {      //新增弹窗的数据
        name: "",
        region: "",
      },
      formInline: {    //搜索的数据
        user: "",
        region: "",
      },
    });
    //弹窗中的方法 确认 取消按钮点击事件
    const dialogFormClick = () => {
      obj.dialogFormVisible = false;
    };

    //init -> page -> 此方法，page回传table需要的数据
    const getPageData = (data) => {
      obj.tableData = data;
    };
    const postPage = ref(null);

    //分页请求初始化执行的方法：即请求要分页的数据
    //url 传入api地址，  data传入数组[] 或 对象{} 或 字符串数据
    //axios 不支持跨域，需要代理 或者搭配本地的nginx调试
    const init = () => {
      postPage.value.postPageReq("url", "data");
    };

    return {
      obj,
      props,
      postPage,
      getPageData,
      dialogFormClick,
      dialogFormVisible: false,
      init,
    };
  },
  mounted() {
    //执行初始化方法
    this.$nextTick(function () {
      this.init();
    });
  },
};
</script>

<style>
</style>
